<template>
  <div class="pc-home" v-if="!isphone">
    <div class="details">
      <div class="container main">
        <div class="info_left">
          <template>
            <!-- 轮播 -->
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
            >
              <van-swipe-item v-for="item in detail.img" :key="item">
                <img :src="item" alt="" />
              </van-swipe-item>
            </van-swipe>
          </template>
        </div>
        <div class="info_right">
          <!-- 商品主题 -->
          <div class="info_title">
            <h1>{{ detail.desc.split('蔡', 1)[0] }}</h1>
            <p>{{ detail.desc }}</p>
          </div>
          <!-- 商品价格 -->
          <div class="info_price">
            <div class="price">
              <p>
                <dfn data-v-732d1408="">￥</dfn>
                {{ detail.price + '.00' }}
              </p>
            </div>
            <div class="active">
              <ul>
                <li>
                  <span>赠品</span>
                  <div class="content">
                    <span>
                      <img
                        src="https://shopstatic.vivo.com.cn/vivoshop/commodity/20/20_20200325165425958_250x250.jpg.webp"
                        alt=""
                      />
                    </span>
                    <span
                      ><img
                        src="https://shopstatic.vivo.com.cn/vivoshop/commodity/81/10006981_1635762343059_750x750.png.webp"
                        alt=""
                    /></span>
                  </div>
                </li>
                <li>
                  <span>定制</span>
                  <div class="content">
                    <p>免费定制服务</p>
                  </div>
                </li>
                <li>
                  <span>领卷</span>
                  <div class="content">
                    <span>
                      <img
                        src="https://shopstatic.vivo.com.cn/vivoshop/commodity/20/20_20200325165425958_250x250.jpg.webp"
                        alt=""
                      />
                    </span>
                    <span
                      ><img
                        src="https://shopstatic.vivo.com.cn/vivoshop/commodity/81/10006981_1635762343059_750x750.png.webp"
                        alt=""
                    /></span>
                  </div>
                </li>
                <li>
                  <span>积分</span>
                  <div class="content">
                    <p>购物送积分</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 技术支持 -->
          <div class="support">
            <span>商品支持：</span>
            <ul>
              <li>
                <i class="el-icon-circle-check"></i>
                花呗分期
              </li>
            </ul>
            <ul>
              <li>
                <i class="el-icon-circle-check" color="red"></i>
                积分抵现
              </li>
            </ul>
            <ul>
              <li>
                <i class="el-icon-circle-check"></i>
                以旧换新
              </li>
            </ul>
          </div>
          <!-- 数量 -->
          <div class="number">
            <p>数量</p>
            <template>
              <el-input-number
                v-model="num"
                @change="handleChange"
                :min="1"
                :max="5"
                label="描述文字"
              ></el-input-number>
            </template>
            <span>仅限购五件</span>
          </div>
          <!-- 付款 -->
          <div class="buy">
            <div class="title">
              <img
                src=""
                alt=""
              />
              支持微信付款
            </div>
          </div>
          <!-- 去购物车 -->
          <div class="go_buy">
            <div class="button">
              <el-button
                type="info"
                round
                @click="add({ ...detail, count: 1, email: email })"
                >加入购物车</el-button
              >
              <el-button type="danger" round @click="gopay(detail)"
                >立即购买!</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="phone-home">
    <van-nav-bar
      title="商品"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in detail.img" :key="item">
        <img v-lazy="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品信息 -->
    <div class="desc">
      <h1>{{ '￥' + detail.price }}</h1>
      <p><span>官方直营</span>{{ detail.desc }}</p>
    </div>
    <van-tabs v-model="active">
      <van-tab title="商品展示">
        <div class="show">
          <img :src="detail.showimg" alt="" />
        </div>
      </van-tab>
      <van-tab title="商品评论">
        <cmt></cmt>
      </van-tab>
    </van-tabs>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon
        icon="cart-o"
        @click="$router.push('/cart')"
        text="购物车"
        :badge="number"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        color="#1953b4"
        @click="add({ ...detail, count: 1, email: email })"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        color="#0063d1"
        @click="gopay(detail)"
      />
    </van-goods-action>
  </div>
</template>
<script>
import Vue from 'vue';
import { Toast } from 'vant';
import cmt from '@/components/comment';
Vue.use(Toast);
import { mapState, mapMutations } from 'vuex';
import { getdetail } from '@/api';
export default {
  data() {
    return {
      detail: {},
      active: 0,
      number: 0,
      num: 1,
    };
  },
  computed: {
    // 取出media中的isphone 其他页面按此方法取值
    // isphone为true时，手机端模板，否则网页端模板
    ...mapState('media', ['isphone']),
    ...mapState('carts', ['carts']),
    ...mapState('login', ['email']),
  },
  components: {
    cmt,
  },
  watch: {
    carts: {
      deep: true,
      immediate: true,
      handler(nv) {
        this.number = 0;
        nv.forEach((item) => {
          this.number += item.count;
        });
      },
    },
  },
  created() {
    getdetail({ id: this.$route.params.id }).then((res) => {
      console.log(res);
      this.detail = res.data.data[0];
    });
    console.log(this.$store);
  },
  methods: {
    ...mapMutations('carts', ['add']),
    ...mapMutations('carts', ['pay']),
    gopay(obj) {
      if (sessionStorage.getItem('email') == undefined) {
        Toast({
          message: '请登陆后再购买',
          position: 'bottom',
        });
        return;
      }
      this.pay(obj);
      this.$router.push('/order');
    },
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>
<style lang="scss" scoped>
.pc-home {
  .main {
    width: 1200px;
    margin: 0 auto;
  }

  .details {
    .container {
      display: flex;
      -webkit-box-pack: justify;
      justify-content: space-between;

      .info_left {
        width: 515px;
      }

      .info_right {
        width: 515px;

        // 商品主题
        .info_title {
          h1 {
            font-size: 25px;
            line-height: 1.2;
            margin-top: 10px;
            font-weight: 400;
            color: #333;
          }

          p {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            line-height: 22px;
            margin-top: 10px;
            font-size: 14px;
            color: #333;
            word-break: break-all;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            -webkit-line-clamp: 3;
          }
        }

        // 商品价格
        .info_price {
          margin: 36px 0 15px;
          border: solid #e4e4e4;
          border-width: 1px 0;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          width: 100%;

          .price {
            width: 230px;
            font: inherit;
            font-size: 40px;
            color: #f51200;
            line-height: 128px;
          }

          .active {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            width: 0;
            padding-left: 15px;
            border-left: 1px solid #e0e0e0;

            ul {
              li {
                padding: 3px 0;
                display: flex;
                -webkit-box-align: center;
                align-items: center;

                span {
                  display: inline-block;
                  height: 23px;
                  line-height: 23px;
                  font-size: 12px;
                  text-align: center;
                  padding: 0 5px;
                  margin-right: 10px;
                  color: #fff;
                  background-color: #f51314;
                  border-radius: 2px;
                }

                .content {
                  flex: 1;
                  width: 0;
                  line-height: 1.4;
                  display: flex;
                  flex-wrap: wrap;

                  span {
                    padding-right: 15px;
                    display: inline-block;
                    width: 35px;
                    height: 35px;
                    vertical-align: middle;
                    background-color: #fff;
                    color: black;

                    img {
                      width: 200%;
                    }

                    p {
                      padding-right: 15px;
                      width: 35px;
                      height: 35px;
                      color: black;
                      // font-size: 26px !important;
                    }
                  }
                }
              }
            }
          }
        }

        // 技术支持
        .support {
          display: flex;
          padding: 10px 0 30px;
          position: relative;

          span {
            font-size: 16px;
          }

          ul {
            -webkit-box-flex: 1;
            flex: 1;
            width: 0;
            margin-left: 10px;

            li {
              display: inline-block;
              cursor: pointer;
              margin-left: 20px;
              padding-bottom: 20px;
              position: relative;
              font-size: 15px;

              i {
                color: #f10313;
              }
            }
          }
        }

        // 数量
        .number {
          p {
            padding-top: 20px;
            font-size: 19px;
            line-height: 1;
            margin-bottom: 20px;
            color: #333;
          }

          .el-input__inner {
            border-left: 1px solid #dcdfe6;
          }

          span {
            font-size: 16px;
            margin-left: 20px;
          }
        }

        // 购买
        .buy {
          .title {
            padding-top: 20px;
            font-size: 19px;
            line-height: 1;
            margin-bottom: 20px;
            color: #333;

            img {
              width: 23px;
              height: 20px;
              vertical-align: bottom;
            }
          }

          .dd {
            margin-left: -15px;
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;

            ul {
              width: 49%;
              display: flex;
              flex-wrap: wrap;

              li {
                width: 245px;
                height: 90px;
                margin-bottom: 15px;
                margin-left: 15px;
                font-size: 16px;
                color: #777;
                cursor: pointer;
                border: 1px solid #ddd;
                border-radius: 6px;
                position: relative;

                .item_detail {
                  height: 100%;
                  display: flex;
                  -webkit-box-orient: vertical;
                  -webkit-box-direction: normal;
                  flex-direction: column;
                  -webkit-box-pack: center;
                  justify-content: center;
                  align-items: center;
                  padding-right: 20px;

                  h2 {
                    font-weight: 400;
                    font-size: 15px;
                    line-height: 1.5;
                  }

                  p {
                    line-height: 1.3;
                  }
                }
              }
            }
          }
        }

        // 去购物车
        .go_buy {
          border-top: 1px solid #e5e5e5;

          padding: 5px 0 5px;

          .price {
            display: flex;

            .bb {
              height: 26px;
              line-height: 1;
              border-right: 1px solid #e0e0e0;
              margin-right: 18px;
              padding-right: 18px;
              font-size: 25px;
              color: #f51200;
              white-space: nowrap;
              margin-top: 3px;
            }

            .aa {
              vertical-align: top;
              color: #666;
              line-height: 2;
              font-size: 16px;
              word-break: break-all;
              word-wrap: break-word;
            }
          }

          .button {
            margin-top: 40px;

            .el-button {
              font-size: 20px;
            }

            .is-round:nth-child(2) {
              margin-left: 40px;
              background-color: red;
            }

            .is-round:nth-child(1) {
              background-color: black;
            }
          }
        }
      }
    }
  }
}

.phone-home {
  .van-swipe-item {
    min-height: 300px;
  }
  .van-swipe {
    width: 100%;

    img {
      width: 100%;
    }
  }

  .desc {
    padding: 10px;
    text-align: left;
    color: black;

    h1 {
      color: rgb(255, 72, 0);
    }

    p {
      span {
        color: white;
        background-color: rgb(255, 72, 0);
        border-radius: 2px;
        margin-right: 5px;
      }

      font-size: 14px;
      font-weight: bold;
    }
  }

  .show {
    width: 100%;

    img {
      width: 100%;
    }
  }
}
</style>
